<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache">
  <meta http-equiv="Cache" content="no-cache">
  <link rel="icon" href="data:;base64,=">
  <title>Eng 3.0 test0</title>
  </head>
  <style>

  .app{
    position: relative;
    width:100%;
    height:100%;
    padding:40px;
    color:white;
    font-size:12px;
    background-color: rgba(0,0,0,.6);
    border-radius:4px;
  }
  .app div{
     margin-top:4px;
     padding:4px 0px;
     border-bottom:1px dashed black;
  }
  .bg0{
        /* -webkit-animation-delay: ; */
        background-color:rgba(0,0,0,.3);
  }
  .bg1{
        background-color:rgba(255,0,0,.3);
  }
  .flag{
      display:flex;
  }
  </style>
<body>
   
  <div class="app" e-attr="title=title">
         <!-- <h1>注意 所有 #text 内容文本中  避免使用 {} 花括号, 会干扰判断结果</h1> -->
         <!-- 干扰项 -->
         <!-- <div>测试1 初级文本内容 txt0= {{txt0}} </div>  -->
         <div>测试1 复杂文本内容 txt0= {{txt0}}; txt1={{txt1}} ; test(txt0, txt1 , base.haha ) = {{ test(txt0, txt1 , base.haha ) }} ;  txt0+123={{ txt0+123+"{测试2}" }} </div> 
         
            <!--  测试2:干扰项目{{ test (txt0, txt1, txt2,txt3, txt4 , base.txt5 )}}  -->
         <div e-fork="base">
               测试2e-base {{txt5}} 向上查找 {{$p.txt1}} 根查$g.base.txt5={{$g.base.txt5}}
        </div>
         <div style="color:#FD574D;" e-evt="onmouseover=hover();onclick=click()" >
                 测试   checkbox 双向绑定 可以同时响应绑定的 onchange 事件    (本条绑了 onclick和onmouseover)
         </div>
         <div e-attr="class=checked?'bg1':'bg0';title='测试 多个attr'">
              <input type="checkbox" style="width:30px;height:30px;" e-attr="checked=checked" e-evt="onchange=checkChange()">
         </div> 
         <div style="color:#FD574D;">
                 测试  e-input (独 key 双向绑定 ) 支持 etValue(txt0,txt1)  txt0+' 哈哈' 的写法  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         </div>
         <div>
              <input type="text" style="width:240px;height:32px;" e-input="iptTxt0">
         </div>
         <div style="color:#FD574D;">
                 测试  e-change  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         </div>
         <div>
              <input type="text" style="width:240px;height:32px;" e-change="iptTxt0">
         </div>
         <div style="color:#FD574D;">
                 测试  e-html 和 e-text  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         </div>
         <div>
             <div e-html="html"></div>
             <hr>
             <div e-text="html"></div>
         </div>
         <div style="color:#FD574D;">
                 测试  e-style  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         </div>
         <div>
               <div  e-style="color='red';background-color='rgba(255,255,0)';padding-left=paddingStyle()">
                   测试样式e-style  color='yellow';background-color='rgba(255,255,0)' ; padding-left=paddingStyle()
               </div>
         </div>
          <div style="color:#FD574D;">
                 测试  e-show  num>10 ; num < 10 ; flag ;   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         </div>
         <div>
               <div e-show="num>=10">
                     条件 num >= 10
               </div>
               <div e-show="num<=10">
                     条件 num <= 10
               </div>
               <div e-show="flag" class="flag" title=" class=flag 测试 默认样式是否生效 ">
                     条件  flag (boolean)
               </div>
         </div>
        <!-- 测试 镜像 数据 是否可重复    -->
        <div e-fork="base">
              (镜像数据 => ) 测试2e-base {{txt5}} 向上查找 {{$p.txt1}} 根查$g.base.txt5={{$g.base.txt5}}
        </div> 
        
         <!-- <div>
             <div e-for="list1" style="color:#58C148;">
                   list1 测试单层 引用数据类型 {{txt}} ___index={{$_index}}
             </div> 
         </div> -->
        
         <div e-fork="fork2">
             <div e-for="list2" style="color:#CADB3B;">
                   list2  测试单层 基本数据类型  {{$_value}}+{{$_value}} + {{$_index}}  <span> span</span>
             </div> 
         </div> 
          <!-- 测试 嵌套循环 + 镜像 -->
          <div style="color:#FD574D;">
                 测试 嵌套循环 + 镜像 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          </div>
        <!--  <div>
               <div e-for="list3" style="color:#E3A2F3" e-filter="filter1()">
                     嵌套循环 list3 AAAA  {{txt}} + {{$_index}}
                       <div>
                            <div e-for="list5" style="color:#FABE80;margin-left:30px;">
                                   list3_list5_A __ {{$_value}}  ;  {{$_value}}  ; {{$_index}}
                            </div>
                       </div>
                       <div>
                            <div e-for="list5" style="color:#FABE80;margin-left:30px;">
                                   list3_list5_B __  {{$_value}}  ;  {{$_value}}   xxxxxx;
                            </div>
                       </div>
                       <div>
                            <div e-for="list5" style="color:#FABE80;margin-left:30px;">
                                   list3_list5_C __  {{$_value}}  ;  {{$_value}}   ccccccc;
                            </div>
                       </div>
                </div> 
         </div> -->
         <!--  <div>
               <div e-for="list3" style="color:#57E898">
                      嵌套循环 BBBB  {{txt}} + {{$_index}}
                       <div>
                            <div e-for="list5" style="color:#FABE80;margin-left:30px;">
                                    测试 $_value ==  {{$_value}}  ;
                            </div>
                       </div>
                </div> 
         </div> -->
       
         <!--  测试 镜像 分支数据的处理  单层 -->
          <div style="color:#FD574D;">
                 测试 镜像 分支 列表数据的处理  单层 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          </div>
          <!-- <div>
              <div e-for="list4" style="color:#C760F8;">
                   测试列表镜像 - 单层 list4.a   value= {{txt}} ++{{$_index}}
                   <div style="margin-left:40px;">
                         (排除关联渲染 , 检查单独渲染)不同dom的 txt => {{txt}} 
                   </div>
              </div>
          </div>
          <div>
              <div e-for="list4" style="color:#C760F8;">
                   测试列表镜像 - 单层 list4.b  value= {{txt}} 
              </div>
          </div>
          <div>
              <div e-for="list4" style="color:#C760F8;">
                   测试列表镜像 - 单层 list4.c  value= {{txt}} 
              </div>
          </div> -->

         <!-- <div>
                <div e-for="list6" style="color:#C760F8;">
                    list6_A  value= {{txt}}  __  {{$_index}}
            </div>
         </div>
         <div>
                <div e-for="list6" style="color:#19D919">
                    list6_B  value= {{txt}}  __  {{$_index}}
                </div>
         </div>
         <div style="color:#FD574D;">
                 测试 数组中绑定以上的其它指令  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
         </div>
         <div>
              <div e-for="list7" e-evt="onclick=click2($)" e-style="color='red';background-color='yellow'" e-attr="title=txt">
                   {{txt}}
              </div>
         </div>
 -->
  </div>

</body>
</html>
<script>
    
var app=new Eng({
        el:document.getElementsByClassName('app')[0],
        data:{
            title:'测试 e-attr ~~~~~~~  ', 
            title2:'测试 title2',
            checked:true,
            html:'e-html = <button>测试 </button>',
            txt0:'txt 0 ,',
            txt1:'txt 1 ,',
            txt2:'txt 2 ,',
            txt3:'txt 3 ,',
            txt4:'txt 4 ,',
            iptTxt0:'',
            iptTxt1:'',
            num:10,
            flag:true,
            base:{
                txt5:'[ txt base ]',
                haha:'haha',
            },
            title:'测试鼠标悬浮提示',
            // 测试 对象数据类型
            list1:[{txt:'list1_0'},{txt:'list1_1'},{txt:'list1_2'}],
            fork2:{
                // 测试基本数据类型
                list2:['a__','b__','c__'],
            },
            // 测试嵌套循环  
            list3:[
                {
                    txt:'父循环A ',
                    list5:['子循环a_1','子循环a_2']
                },
                /* {
                    txt:'父循环B ',
                    list5:['子循环b_1','子循环b_2','子循环b_3']
                } */
            ],
            // 测试 单层镜像
            list4:[{txt:'d_a'},{txt:'d_b'}],
            list6:[{txt:111},{txt:222},{txt:333},{txt:444},{txt:555}],
            list7:[
                 { txt:'list7 _ a' }
            ]
        },
        
        onInit(){

        },
        onCreated(){

        },
        onDestroy(){

        },
        // 过滤器  (仅能监测 到 json 和 json.key , 不能监测 array)
        filters:{
              filter1(key,value){
                  console.log(`key = ${key}   value = ${value}`);
                //   if($setting){
                //     debugger
                //   }
                  return {txt:'测试filter'}
                //   return '测试filter'
              },
        },
        methods:{
            paddingStyle(){
                return '20px' 
            },
            test( a,b,c ){

                return  a+b+c;
            },
            hover(){
                console.log('hover');
            },
            click(){
                console.log('click');
            },
            click2( data,evt,dom){
                console.log('click2');
            },
            getValue(a,b){
                
                return 'hahaha'+a+b
            },
            checkChange(evt,dom){
                // console.log(evt);
                console.log('dom.checked='+dom.checked);

                console.log('我被调用了 ~~~~~~~  checked =>  '+this.$_data.checked);
            }
        }
});


</script>